<template>
     <div id="app">
      <user-nav 
      :navTitle="navTitle" 
      :activeItem="activeItem" 
      @activeClickHandle="activeClickHandle"
      @loginHandler="loginHandler"
      @createCenterHandler="createCenterHandler"
      />
      <router-view />
  </div>
</template>

<script>
import navTitle from '@/config/nav'
export default {
       data() {
        return {
            navTitle,
            activeItem:'findMusic'
        }
       },
      methods:{
        activeClickHandle(label){
          this.$router.push(`/${label}`)
          this.activeItem = this.$route.path.split('/')[1]
        },
        loginHandler(){
           this.$router.push('/login')
        },
        createCenterHandler(){
           this.$router.push('/framerCenter')
        }
      },
      updated(){
        console.log(navTitle)
        this.activeItem = this.$route.path.split('/')[1]
      }
}
</script>

<style lang="scss">
</style>
